<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<style>
		
			.panel-body .row {
				margin: 10px;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
	<div id="app">
	<header>
			<div style="width: 1000px; margin: auto;">
				<nav class="navbar navbar-inverse navbar-fixed-top">
					<div id="navbar" class="container">
						<div class="row">
							<div class="col-md-offset-4 col-md-5">
								<ul class="nav navbar-nav ">
									<li role="presentation"><a href="index.html">首页</a></li>
									<li role="presentation"><a href="classNews.html?page=classnews">班级新闻</a>
									</li>
									<li role="presentation"><a href="album.html">班级相册</a></li>
									<li role="presentation"><a href="classMembers.html">班级成员</a>
									</li>
								</ul>
							</div>
							<div class="col-md-3" id="user_box">
								<a href="personalCenter.html">个人中心</a>
							</div>
						</div>

					</div>
				</nav>
			</div>
		</header>
		<div class="container" style="width: 65%;">
			<div class="panel panel-primary" style="margin-top: 120px;">
				<div class="panel-heading">
					<h3 class="panel-title" style="font-size: 30px;text-align: center;">
						个人中心
					</h3>
				</div>
				<div class="panel-body">
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							用户：
						</div>
						<div class="col-md-5">
							{{list.userInfo.username}}
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							学号：
						</div>
						<div class="col-md-5">
							{{list.userInfo.uStuNum}}
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							姓名：
						</div>
						<div class="col-md-5">
							{{list.userInfo.uname}}
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							手机：
						</div>
						<div class="col-md-5">
							{{list.userInfo.uPhone}}
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							邮箱：
						</div>
						<div class="col-md-5">
							{{list.userInfo.uMail}}
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-md-offset-2">
							出身年月：
						</div>
						<div class="col-md-5">
							{{list.userInfo.uData}}
						</div>
					</div>
					
				</div>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						list:[]
					}
				},
				mounted() {
					axios.get('../PersonalCenterServlet')
						.then(response => (
								this.list=response.data
								))
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				}
			
			})
		</script>
	</body>

</html>